<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:c="http://www.w3.org/1999/XSL/Transform" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <link type="text/css" rel="stylesheet" th:href="@{/css/style.css}"/>
        <!--[if IE 6]>
        <script th:src="@{/js/iepng.js}" type="text/javascript"></script>
        <script type="text/javascript">
            EvPNG.fix('div, ul, img, li, input, a');
        </script>
        <![endif]-->
        <script type="text/javascript" th:src="@{/js/jquery-1.11.1.min_044d0927.js}"></script>
        <script type="text/javascript" th:src="@{/js/jquery-1.8.2.min.js}"></script>
        <script type="text/javascript" th:src="@{/js/menu.js}"></script>
        <script type="text/javascript" th:src="@{/js/lrscroll_1.js}"></script>
        <script type="text/javascript" th:src="@{/js/n_nav.js}"></script>
        <title>尤洪</title>
        <script type="text/javascript" th:inline="javascript">
            //获取协议名称
            var scheme = [[${#request.getScheme()}]];
            //获取服务器名称
            var serverName = [[${#request.getServerName()}]];
            //获取服务器端口号
            var serverPort = [[${#request.getServerPort()}]];
            //获取上下文根
            var contextPath = [[${#request.getContextPath()}]]
            var allPath = scheme + "://" + serverName + ":" + serverPort + contextPath;
            var pn = 1;
            var ps = 8;
            var lp;
            var flag = false;

            $(function () {

                //当页面加载完毕后,显示出香水品牌信息
                scentPageList();
                //显示完数据过后,将搜索框中的数据清空
                $("#name").val("");

                //为品牌搜索按钮绑定事件
                $("#searchBtn").click(function () {
                    //点击查询按钮的时候,我们应该将搜索框中的信息保存到隐藏域中
                    $("#hidden-name").val($.trim($("#productTypeName").val()));
                    scentPageList();
                    productPageList();
                    //将搜索框中的数据清空
                    $("#productTypeName").val("");
                })

                //当页面加载完毕后,显示出该品牌香水的产品信息列表
                productPageList();

                //当页面加载完毕后调用显示购物车中商品信息的函数
                showCar();

                //当页面加载完毕后显示浏览历史列表
                showHistory();


            })


            function addLike(id, price, sales) {
                $.ajax({
                    url: allPath + "/product/addLike.do",
                    data: {
                        "productId": id,
                        "userId": [[${session.loginUser.id}]],
                        "price": price,
                        "sales": sales,
                    },
                    type: "post",
                    dataType: "json",
                    success: function (data) {
                        if (data.success) {
                            //添加成功后将收藏的小心心变红
                            $("#ss" + id).attr("style", "background:url(" + allPath + "/images/heart_h.png) no-repeat 10px center;");
                        } else {
                            alert(data.msg);
                        }
                    }
                })

            }

            function showHistory() {
                $.ajax({
                    url: allPath + "/product/showHistory.do",
                    data: {
                        "userId": [[${session.loginUser.id}]],
                    },
                    type: "get",
                    dataType: "json",
                    success: function (data) {

                        var html = "";
                        $.each(data, function (i, n) {
                            html += '<li>';
                            html += '<div class="img"><a href="#"><img src="' + allPath + n.imageUrl + '" width="185" height="162"/></a></div>';
                            html += '<div class="name"><a href="#">' + n.productName + '</a></div>';
                            html += '<div class="price"><font>￥<span>' + n.price + '</span></font> &nbsp; ' + n.sales + '</div>';
                            html += '</li>';

                            //console.log(i);
                            if (i > 3) {
                                //当n=5时跳出循环
                                return false;
                            }
                        })
                        $("#historyBody").html(html);

                    }
                })
            }

            function addProduct(id, price, imageUrl, sales, number) {
                $.ajax({
                    url: allPath + "/car/addProduct.do",
                    data: {
                        "productId": id,
                        "userId": [[${session.loginUser.id}]],
                        "price": price,
                        "imageUrl": imageUrl,
                        "sales": sales,
                        "number": number
                    },
                    type: "post",
                    dataType: "json",
                    success: function (data) {
                        if (data.success) {
                            //添加成功后刷新购物车
                            showCar();
                        } else {
                            alert(data.msg);
                        }
                    }
                })
            }

            function productPageList() {
                $.ajax({
                    url: allPath + "/product/productPageList.do",
                    data: {
                        "productTypeId": [[${id}]],
                        "pageNum": pn,
                        "pageSize": ps,
                        "productTypeName": $.trim($("#productTypeName").val()),

                    },
                    type: "get",
                    dataType: "json",
                    success: function (data) {
                        lp = data.pageTotalNum;
                        var html = "";
                        $.each(data.dataList, function (i, n) {
                            html += '<li>';
                            html += '<div class="img">';
                            html += '<a href="' + allPath + '/product/detail.do?id=' + n.id + '"><img src="' + allPath + n.imageUrl + '" width="210" height="185"/></a>';
                            html += '</div>';
                            html += '<div class="price">';
                            html += '<font>￥<span>' + n.price + '</span></font> &nbsp; ' + n.sales + '';
                            html += '</div>';
                            html += '<div class="name"><a href="#">' + n.description + '</a></div>';
                            html += '<div class="carbg">';
                            html += '<a href="javascript:void(0);" id="ss' + n.id + '" onclick="addLike(\'' + n.id + '\',\'' + n.price + '\',\'' + n.sales + '\')" class="ss" style="background: url(../images/heart.png) no-repeat 10px center;">收藏</a>';
                            html += '<a href="javascript:void(0);" onclick="addProduct(\'' + n.id + '\',\'' + n.price + '\',\'' + n.imageUrl + '\',\'' + n.sales + '\')" class="j_car">加入购物车</a>';
                            html += '</div>';
                            html += '</li>';
                        })

                        $("#cateBody").html(html);
                        $("#pageInfo").html("总共" + data.totalRows + " 当前" + data.pageNum + "/" + data.pageTotalNum + "页");
                        fyNum();
                    }
                })
            }

            function goPage(n) {
                if (n < 1) {
                    alert("当前已经是首页了!");
                    return;
                }
                if (n > lp) {
                    alert("当前已经是末页了!")
                    return;
                }
                pn = n;
                productPageList();
            }

            function goPageByNum() {
                var pageNumInput = $("#pageNum").val();
                goPage(pageNumInput);
                //动态刷新后将输入框中的数据清空
                $("#pageNum").val("");
            }

            function selectChange(e) {
                ps = $(e).val();
                goPage(pn);
            }

            //显示分页的数字
            function fyNum() {
                var str = "";
                if (pn <= 3) {
                    for (var i = 1; i <= pn; i++) {
                        str += '<a href="javascript:void(0);" class="cur" onclick="goPage(' + i + ')">' + i + '</a>';
                    }
                }
                if (pn > 3) {
                    for (var i = pn - 2; i <= pn; i++) {
                        str += '<a href="javascript:void(0);" onclick="goPage(' + i + ')">' + i + '</a>';
                    }
                }
                if (pn <= lp - 2) {
                    for (var i = pn + 1; i <= pn + 2; i++) {
                        str += '<a href="javascript:void(0);" onclick="goPage(' + i + ')">' + i + '</a>';
                    }
                }

                if (pn > lp - 2) {
                    for (var i = pn + 1; i <= pn; i++) {
                        str += '<a href="javascript:void(0);" onclick="goPage(' + i + ')">' + i + '</a>';
                    }
                }

                $("#fyNum").html(str);
            }

            function scentPageList() {

                var id = [[${id}]];
                //alert(id);
                $.ajax({
                    url: allPath + "/product/categoryList.do",
                    data: {
                        "proColumn": [[${proColumn}]],
                        "name": $.trim($("#productTypeName").val()),
                    },
                    type: "get",
                    dataType: "json",
                    success: function (data) {
                        var html = "";
                        $.each(data, function (i, n) {
                            html += '<a id="pp' + n.id + '" href="' + allPath + '/product/CategoryList.do?id=' + n.id + '">' + n.name + '（' + n.value + '）</a>';
                            if (id == n.id) {
                                $("#pp" + id).css("color", "#ff4e00");
                            }

                        })
                        $("#tdBody").html(html);

                    }
                })
            }

            function showCar() {

                var userId = [[${session.loginUser}]].id;

                $.ajax({
                    url: allPath + "/car/showCar.do",
                    data: {
                        /*
                            需要传当前用户的id
                         */
                        "userId": userId
                    },
                    type: "get",
                    dataType: "json",
                    success: function (data) {
                        /*
                            前端页面需要该用户添加到购物车中的商品列表
                            dataList:
                                ["productList":{商品1},{商品2},{商品3}]
                         */
                        var html = "";
                        var price = 0;
                        var num = 0;
                        $.each(data, function (i, n) {

                            html += '<li>';
                            html += '<div class="img">';
                            html += '<a href="#">';
                            html += '<img src="' + allPath + n.imageUrl + '" width="58" height="58"/>';
                            html += '</a>';
                            html += '</div>';
                            html += '<div class="name">';
                            html += '<a href="#">' + n.productName + '</a>';
                            html += '</div>';
                            html += '<div class="price"><font color="#ff4e00">￥' + n.price + '</font>X' + n.number + '</div>';
                            html += '</li>';
                            price += (n.price * n.number);
                            num += n.number;
                        })
                        $("#carList").html(html)
                        $("#carNum").html(num);
                        $("#totalPrice").html(price);
                    }
                })
            }

            function ShowDiv(show_div, bg_div) {
                document.getElementById(show_div).style.display = 'block';
                document.getElementById(bg_div).style.display = 'block';
                var bgdiv = document.getElementById(bg_div);
                bgdiv.style.width = document.body.scrollWidth;
                // bgdiv.style.height = $(document).height();
                $("#" + bg_div).height($(document).height());
            };

            function deleteHistory() {
                $.ajax({
                    url: allPath + "/product/cleanHistory.do",
                    type: "get",
                    dataType: "json",
                    success: function (data) {

                        if (data) {
                            alert("历史记录清空成功");
                            showHistory();
                        } else {
                            alert("历史记录清空失败");
                        }

                    }
                })
            }


        </script>
    </head>
    <body>
        <!--Begin Header Begin-->
        <div class="soubg">
            <div class="sou">
                <!--Begin 所在收货地区 Begin-->
                <span class="s_city_b">
        	<span class="fl">送货至：</span>
            <span class="s_city">
            	<span>四川</span>
                <div class="s_city_bg">
                	<div class="s_city_t"></div>
                    <div class="s_city_c">
                    	<h2>请选择所在的收货地区</h2>
                        <table border="0" class="c_tab" style="width:235px; margin-top:10px;" cellspacing="0"
                               cellpadding="0">
                          <tr>
                            <th>A</th>
                            <td class="c_h"><span>安徽</span><span>澳门</span></td>
                          </tr>
                          <tr>
                            <th>B</th>
                            <td class="c_h"><span>北京</span></td>
                          </tr>
                          <tr>
                            <th>C</th>
                            <td class="c_h"><span>重庆</span></td>
                          </tr>
                          <tr>
                            <th>F</th>
                            <td class="c_h"><span>福建</span></td>
                          </tr>
                          <tr>
                            <th>G</th>
                            <td class="c_h"><span>广东</span><span>广西</span><span>贵州</span><span>甘肃</span></td>
                          </tr>
                          <tr>
                            <th>H</th>
                            <td class="c_h"><span>河北</span><span>河南</span><span>黑龙江</span><span>海南</span><span>湖北</span><span>湖南</span></td>
                          </tr>
                          <tr>
                            <th>J</th>
                            <td class="c_h"><span>江苏</span><span>吉林</span><span>江西</span></td>
                          </tr>
                          <tr>
                            <th>L</th>
                            <td class="c_h"><span>辽宁</span></td>
                          </tr>
                          <tr>
                            <th>N</th>
                            <td class="c_h"><span>内蒙古</span><span>宁夏</span></td>
                          </tr>
                          <tr>
                            <th>Q</th>
                            <td class="c_h"><span>青海</span></td>
                          </tr>
                          <tr>
                            <th>S</th>
                            <td class="c_h"><span>上海</span><span>山东</span><span>山西</span><span class="c_check">四川</span><span>陕西</span></td>
                          </tr>
                          <tr>
                            <th>T</th>
                            <td class="c_h"><span>台湾</span><span>天津</span></td>
                          </tr>
                          <tr>
                            <th>X</th>
                            <td class="c_h"><span>西藏</span><span>香港</span><span>新疆</span></td>
                          </tr>
                          <tr>
                            <th>Y</th>
                            <td class="c_h"><span>云南</span></td>
                          </tr>
                          <tr>
                            <th>Z</th>
                            <td class="c_h"><span>浙江</span></td>
                          </tr>
                        </table>
                    </div>
                </div>
            </span>
        </span>
                <!--End 所在收货地区 End-->
                <span class="fr">
        	<span class="fl">
                你好，
                <span th:if="${session.loginUser eq null}">
                    请<a th:href="@{/Login.do}">登录</a>
                </span>
                <span th:unless="${session.loginUser eq null}" th:text="${session.loginUser.username}"></span>
                &nbsp;
                <a th:href="@{/Register.do}" style="color:#ff4e00;">免费注册</a>&nbsp;|&nbsp;
                <<a href="javaScript:void(0)" onclick="window.location.href=allPath+'/product/Order.do'">我的订单</a>&nbsp;|
                <a href="javaScript:void(0)" onclick="window.location.href=allPath+'/user/loginOut.do'">退出登录</a>&nbsp;|
            </span>
        	<span class="ss">
            	<div class="ss_list">
                	<a href="#">收藏夹</a>
                    <div class="ss_list_bg">
                    	<div class="s_city_t"></div>
                        <div class="ss_list_c">
                        	<ul>
                            	<li><a th:href="@{/product/Collect.do}">我的收藏夹</a></li>
                                <li><a th:href="@{/product/Collect.do}">我的收藏夹</a></li>
                            </ul>
                        </div>
                    </div>     
                </div>
                <div class="ss_list">
                	<a href="#">客户服务</a>
                    <div class="ss_list_bg">
                    	<div class="s_city_t"></div>
                        <div class="ss_list_c">
                        	<ul>
                            	<li><a href="#">客户服务</a></li>
                                <li><a href="#">客户服务</a></li>
                                <li><a href="#">客户服务</a></li>
                            </ul>
                        </div>
                    </div>    
                </div>
                <div class="ss_list">
                	<a href="#">网站导航</a>
                    <div class="ss_list_bg">
                    	<div class="s_city_t"></div>
                        <div class="ss_list_c">
                        	<ul>
                            	<li><a href="#">网站导航</a></li>
                                <li><a href="#">网站导航</a></li>
                            </ul>
                        </div>
                    </div>    
                </div>
            </span>
            <span class="fl">|&nbsp;关注我们：</span>
            <span class="s_sh"><a href="#" class="sh1">新浪</a><a href="#" class="sh2">微信</a></span>
            <span class="fr">|&nbsp;<a href="#">手机版&nbsp;<img th:src="@{/images/s_tel.png}"/></a></span>
        </span>
            </div>
        </div>
        <div class="top">
            <div class="logo"><a th:href="@{/Index.do}"><img th:src="@{/images/logo.png}"/></a></div>
            <div class="search">
                <form>
                    <input type="hidden" id="hidden-name"/>
                    <input type="text" value="" class="s_ipt" id="productTypeName"/>
                    <input type="button" id="searchBtn" value="搜索" class="s_btn"/>
                </form>
                <span class="fl"><a href="#">咖啡</a><a href="#">iphone 6S</a><a href="#">新鲜美食</a><a href="#">蛋糕</a><a
                        href="#">日用品</a><a href="#">连衣裙</a></span>
            </div>
            <div class="i_car">
                <div class="car_t">购物车 [ <span id="carNum"></span> ]</div>
                <div class="car_bg">
                    <!--Begin 购物车未登录 Begin-->
                    <!--<div class="un_login">还未登录！<a href="Login.html" style="color:#ff4e00;">马上登录</a> 查看购物车！</div>-->

                    <div th:if="${session.loginUser eq null}">
                        <div class="un_login">还未登录！
                            <a th:href="@{/Login.do?action='toLogin'}" style="color:#ff4e00;">马上登录</a>
                        </div>
                    </div>
                    <div class="un_login" th:unless="${session.loginUser eq null}">
                        <span th:text="${session.loginUser.username}"></span>&nbsp;&nbsp;&nbsp;<a
                            th:href="@{/car/BuyCar.do}" style="color:#ff4e00;">查看购物车</a>
                    </div>

                    <!--End 购物车未登录 End-->
                    <!--Begin 购物车已登录 Begin-->
                    <ul class="cars" id="carList">
                        <!--<li>
                            <div class="img"><a href="#"><img th:src="@{/images/car1.jpg}" width="58" height="58"/></a>
                            </div>
                            <div class="name"><a href="#">法颂浪漫梦境50ML 香水女士持久清新淡香 送2ML小样3只</a></div>
                            <div class="price"><font color="#ff4e00">￥399</font> X1</div>
                        </li>
                        <li>
                            <div class="img"><a href="#"><img th:src="@{/images/car2.jpg}" width="58" height="58"/></a>
                            </div>
                            <div class="name"><a href="#">香奈儿（Chanel）邂逅活力淡香水50ml</a></div>
                            <div class="price"><font color="#ff4e00">￥399</font> X1</div>
                        </li>
                        <li>
                            <div class="img"><a href="#"><img th:src="@{/images/car2.jpg}" width="58" height="58"/></a>
                            </div>
                            <div class="name"><a href="#">香奈儿（Chanel）邂逅活力淡香水50ml</a></div>
                            <div class="price"><font color="#ff4e00">￥399</font> X1</div>
                        </li>-->
                    </ul>
                    <div class="price_sum">共计&nbsp; <font color="#ff4e00">￥</font><span id="totalPrice"></span>
                    </div>
                    <div class="price_a"><a th:href="@{/car/BuyCar.do}">去购物车结算</a></div>
                    <!--End 购物车已登录 End-->
                </div>
            </div>
        </div>
        <!--End Header End-->
        <!--Begin Menu Begin-->
        <div class="menu_bg">
            <div class="menu">
                <!--Begin 商品分类详情 Begin-->
                <div class="nav">
                    <div class="nav_t">全部商品分类</div>
                    <div class="leftNav none">
                        <ul>
                            <li th:each="myOnetMap:${application.typeMap}">
                                <div class="fj">
                                    <span class="n_img"><span></span><img th:src="@{/images/nav1.png}"/></span>
                                    <span class="fl" th:text="${myOnetMap.key}"></span>
                                </div>
                                <div class="zj">
                                    <div class="zj_l" th:each="myTwoList:${myOnetMap.value}">
                                        <div class="zj_l_c" th:each="myTwoMap:${myTwoList}">
                                            <h2 th:text="${myTwoMap.key}"></h2>
                                            <span th:each="threeList:${myTwoMap.value}">
                                                <span th:each="productType:${threeList}">
                                                    <a th:href="@{/CategoryList.do(id=${productType.id})}"
                                                       th:text="${productType.name}"></a>
                                                </span>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="zj_r">
                                        <a href="#"><img th:src="@{/images/n_img1.jpg}" width="236" height="200"/></a>
                                        <a href="#"><img th:src="@{/images/n_img2.jpg}" width="236" height="200"/></a>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <!--End 商品分类详情 End-->
                <ul class="menu_r">
                    <li><a th:href="@{/Index.do}">首页</a></li>
                    <li><a href="Food.html">美食</a></li>
                    <li><a href="Fresh.html">生鲜</a></li>
                    <li><a href="HomeDecoration.html">家居</a></li>
                    <li><a href="SuitDress.html">女装</a></li>
                    <li><a href="MakeUp.html">美妆</a></li>
                    <li><a href="Digital.html">数码</a></li>
                    <li><a href="GroupBuying.html">团购</a></li>
                </ul>
                <div class="m_ad">中秋送好礼！</div>
            </div>
        </div>
        <!--End Menu End-->
        <div class="i_bg">
            <div class="postion">
                <span class="fl">全部 > 美妆个护 > 香水 > </span>
                <span class="n_ch">
            <span class="fl">品牌：<font><span id="pinpai" th:text="${name}"></span></font></span>
            <a href="javascript:void(0);" onclick="window.history.back()"><img th:src="@{/images/s_close.gif}"/></a>
        </span>
            </div>
            <!--Begin 筛选条件 Begin-->
            <div class="content mar_10">
                <table border="0" class="choice" style="width:100%; font-family:'宋体'; margin:0 auto;" cellspacing="0"
                       cellpadding="0">
                    <tr valign="top">
                        <td width="70">&nbsp; 品牌：</td>
                        <td class="td_a" id="tdBody">
                            <!--<a href="#" class="now">香奈儿（Chanel）</a>
                            <a href="#">迪奥（Dior）</a>
                            <a href="#">范思哲（VERSACE）</a>
                            <a href="#">菲拉格慕（Ferragamo）</a>
                            <a href="#">兰蔻（LANCOME）</a>
                            <a href="#">爱马仕（HERMES）</a>
                            <a href="#">卡文克莱（Calvin Klein）</a>
                            <a href="#">古驰（GUCCI）</a>
                            <a href="#">宝格丽（BVLGARI）</a>
                            <a href="#">阿迪达斯（Adidas）</a>
                            <a href="#">卡尔文·克莱恩（CK）</a>
                            <a href="#">凌仕（LYNX）</a>
                            <a href="#">大卫杜夫（Davidoff）</a>
                            <a href="#">安娜苏（Anna sui）</a>
                            <a href="#">阿玛尼（ARMANI）</a>
                            <a href="#">娇兰（Guerlain）</a>-->
                        </td>
                    </tr>
                    <tr valign="top">
                        <td>&nbsp; 价格：</td>
                        <td class="td_a"><a href="#">0-199</a><a href="#" class="now">200-399</a><a href="#">400-599</a><a
                                href="#">600-899</a><a href="#">900-1299</a><a href="#">1300-1399</a><a
                                href="#">1400以上</a></td>
                    </tr>
                    <tr>
                        <td>&nbsp; 类型：</td>
                        <td class="td_a"><a href="#">女士香水</a><a href="#">男士香水</a><a href="#">Q版香水</a><a
                                href="#">组合套装</a><a href="#">香体走珠</a><a href="#">其它</a></td>
                    </tr>
                    <tr>
                        <td>&nbsp; 香型：</td>
                        <td class="td_a"><a href="#">浓香水</a><a href="#">香精Parfum香水</a><a href="#">淡香精EDP淡香水</a><a
                                href="#">香露EDT</a><a href="#">古龙水</a><a href="#">其它</a></td>
                    </tr>
                </table>
            </div>
            <!--End 筛选条件 End-->

            <div class="content mar_20">
                <div class="l_history">
                    <div class="his_t">
                        <span class="fl">浏览历史</span>
                        <span class="fr"><a href="javaScript:void(0)" onclick="deleteHistory()">清空</a></span>
                    </div>
                    <ul id="historyBody">
                        <!--<li>
                            <div class="img"><a href="#"><img th:src="@{/images/his_1.jpg}" width="185" height="162"/></a>
                            </div>
                            <div class="name"><a href="#">Dior/迪奥香水2件套装</a></div>
                            <div class="price">
                                <font>￥<span>368.00</span></font> &nbsp; 18R
                            </div>
                        </li>
                        <li>
                            <div class="img"><a href="#"><img th:src="@{/images/his_2.jpg}" width="185"
                                                              height="162"/></a>
                            </div>
                            <div class="name"><a href="#">Dior/迪奥香水2件套装</a></div>
                            <div class="price">
                                <font>￥<span>768.00</span></font> &nbsp; 18R
                            </div>
                        </li>
                        <li>
                            <div class="img"><a href="#"><img th:src="@{/images/his_3.jpg}" width="185"
                                                              height="162"/></a>
                            </div>
                            <div class="name"><a href="#">Dior/迪奥香水2件套装</a></div>
                            <div class="price">
                                <font>￥<span>680.00</span></font> &nbsp; 18R
                            </div>
                        </li>
                        <li>
                            <div class="img"><a href="#"><img th:src="@{/images/his_4.jpg}" width="185"
                                                              height="162"/></a>
                            </div>
                            <div class="name"><a href="#">Dior/迪奥香水2件套装</a></div>
                            <div class="price">
                                <font>￥<span>368.00</span></font> &nbsp; 18R
                            </div>
                        </li>
                        <li>
                            <div class="img"><a href="#"><img th:src="@{/images/his_5.jpg}" width="185"
                                                              height="162"/></a>
                            </div>
                            <div class="name"><a href="#">Dior/迪奥香水2件套装</a></div>
                            <div class="price">
                                <font>￥<span>368.00</span></font> &nbsp; 18R
                            </div>
                        </li>-->
                    </ul>
                </div>
                <div class="l_list">
                    <div class="list_t">
            	<span class="fl list_or">
                	<a href="#" class="now">默认</a>
                    <a href="#">
                    	<span class="fl">销量</span>                        
                        <span class="i_up" id="salesUp">销量从低到高显示</span>
                        <span class="i_down" id="salesDown">销量从高到低显示</span>
                    </a>
                    <a href="#">
                    	<span class="fl">价格</span>                        
                        <span class="i_up">价格从低到高显示</span>
                        <span class="i_down">价格从高到低显示</span>     
                    </a>
                    <a href="#">新品</a>
                </span>
                        <span class="fr">共发现120件</span>
                    </div>
                    <div class="list_c">

                        <ul class="cate_list" id="cateBody">
                            <!--<li>
                                <div class="img">
                                    <a href="#"><img th:src="@{/images/per_1.jpg}" width="210" height="185"/></a>
                                </div>
                                <div class="price">
                                    <font>￥<span>198.00</span></font> &nbsp; 26R
                                </div>
                                <div class="name"><a href="#">香奈儿邂逅清新淡香水50ml</a></div>
                                <div class="carbg">
                                    <a href="#" class="ss">收藏</a>
                                    <a href="#" class="j_car">加入购物车</a>
                                </div>
                            </li>
                            <li>
                                <div class="img"><a href="#"><img th:src="@{/images/per_2.jpg}" width="210"
                                                                  height="185"/></a>
                                </div>
                                <div class="price">
                                    <font>￥<span>198.00</span></font> &nbsp; 26R
                                </div>
                                <div class="name"><a href="#">香奈儿邂逅清新淡香水50ml</a></div>
                                <div class="carbg">
                                    <a href="#" class="ss">收藏</a>
                                    <a href="#" class="j_car">加入购物车</a>
                                </div>
                            </li>
                            <li>
                                <div class="img"><a href="#"><img th:src="@{/images/per_3.jpg}" width="210"
                                                                  height="185"/></a>
                                </div>
                                <div class="price">
                                    <font>￥<span>198.00</span></font> &nbsp; 26R
                                </div>
                                <div class="name"><a href="#">香奈儿邂逅清新淡香水50ml</a></div>
                                <div class="carbg">
                                    <a href="#" class="ss">收藏</a>
                                    <a href="#" class="j_car">加入购物车</a>
                                </div>
                            </li>
                            <li>
                                <div class="img"><a href="#"><img th:src="@{/images/per_4.jpg}" width="210"
                                                                  height="185"/></a>
                                </div>
                                <div class="price">
                                    <font>￥<span>198.00</span></font> &nbsp; 26R
                                </div>
                                <div class="name"><a href="#">香奈儿邂逅清新淡香水50ml</a></div>
                                <div class="carbg">
                                    <a href="#" class="ss">收藏</a>
                                    <a href="#" class="j_car">加入购物车</a>
                                </div>
                            </li>
                            <li>
                                <div class="img"><a href="#"><img th:src="@{/images/per_5.jpg}" width="210"
                                                                  height="185"/></a>
                                </div>
                                <div class="price">
                                    <font>￥<span>198.00</span></font> &nbsp; 26R
                                </div>
                                <div class="name"><a href="#">香奈儿邂逅清新淡香水50ml</a></div>
                                <div class="carbg">
                                    <a href="#" class="ss">收藏</a>
                                    <a href="#" class="j_car">加入购物车</a>
                                </div>
                            </li>
                            <li>
                                <div class="img"><a href="#"><img th:src="@{/images/per_6.jpg}" width="210"
                                                                  height="185"/></a>
                                </div>
                                <div class="price">
                                    <font>￥<span>198.00</span></font> &nbsp; 26R
                                </div>
                                <div class="name"><a href="#">香奈儿邂逅清新淡香水50ml</a></div>
                                <div class="carbg">
                                    <a href="#" class="ss">收藏</a>
                                    <a href="#" class="j_car">加入购物车</a>
                                </div>
                            </li>
                            <li>
                                <div class="img"><a href="#"><img th:src="@{/images/per_7.jpg}" width="210"
                                                                  height="185"/></a>
                                </div>
                                <div class="price">
                                    <font>￥<span>198.00</span></font> &nbsp; 26R
                                </div>
                                <div class="name"><a href="#">香奈儿邂逅清新淡香水50ml</a></div>
                                <div class="carbg">
                                    <a href="#" class="ss">收藏</a>
                                    <a href="#" class="j_car">加入购物车</a>
                                </div>
                            </li>
                            <li>
                                <div class="img"><a href="#"><img th:src="@{/images/per_8.jpg}" width="210"
                                                                  height="185"/></a>
                                </div>
                                <div class="price">
                                    <font>￥<span>198.00</span></font> &nbsp; 26R
                                </div>
                                <div class="name"><a href="#">香奈儿邂逅清新淡香水50ml</a></div>
                                <div class="carbg">
                                    <a href="#" class="ss">收藏</a>
                                    <a href="#" class="j_car">加入购物车</a>
                                </div>
                            </li>
                            <li>
                                <div class="img"><a href="#"><img th:src="@{/images/per_9.jpg}" width="210"
                                                                  height="185"/></a>
                                </div>
                                <div class="price">
                                    <font>￥<span>198.00</span></font> &nbsp; 26R
                                </div>
                                <div class="name"><a href="#">香奈儿邂逅清新淡香水50ml</a></div>
                                <div class="carbg">
                                    <a href="#" class="ss">收藏</a>
                                    <a href="#" class="j_car">加入购物车</a>
                                </div>
                            </li>
                            <li>
                                <div class="img"><a href="#"><img th:src="@{/images/per_10.jpg}" width="210"
                                                                  height="185"/></a>
                                </div>
                                <div class="price">
                                    <font>￥<span>198.00</span></font> &nbsp; 26R
                                </div>
                                <div class="name"><a href="#">香奈儿邂逅清新淡香水50ml</a></div>
                                <div class="carbg">
                                    <a href="#" class="ss">收藏</a>
                                    <a href="#" class="j_car">加入购物车</a>
                                </div>
                            </li>
                            <li>
                                <div class="img"><a href="#"><img th:src="@{/images/per_11.jpg}" width="210"
                                                                  height="185"/></a>
                                </div>
                                <div class="price">
                                    <font>￥<span>198.00</span></font> &nbsp; 26R
                                </div>
                                <div class="name"><a href="#">香奈儿邂逅清新淡香水50ml</a></div>
                                <div class="carbg">
                                    <a href="#" class="ss">收藏</a>
                                    <a href="#" class="j_car">加入购物车</a>
                                </div>
                            </li>
                            <li>
                                <div class="img"><a href="#"><img th:src="@{/images/per_12.jpg}" width="210"
                                                                  height="185"/></a>
                                </div>
                                <div class="price">
                                    <font>￥<span>198.00</span></font> &nbsp; 26R
                                </div>
                                <div class="name"><a href="#">香奈儿邂逅清新淡香水50ml</a></div>
                                <div class="carbg">
                                    <a href="#" class="ss">收藏</a>
                                    <a href="#" class="j_car">加入购物车</a>
                                </div>
                            </li>
                            <li>
                                <div class="img"><a href="#"><img th:src="@{/images/per_5.jpg}" width="210"
                                                                  height="185"/></a>
                                </div>
                                <div class="price">
                                    <font>￥<span>198.00</span></font> &nbsp; 26R
                                </div>
                                <div class="name"><a href="#">香奈儿邂逅清新淡香水50ml</a></div>
                                <div class="carbg">
                                    <a href="#" class="ss">收藏</a>
                                    <a href="#" class="j_car">加入购物车</a>
                                </div>
                            </li>
                            <li>
                                <div class="img"><a href="#"><img th:src="@{/images/per_6.jpg}" width="210"
                                                                  height="185"/></a>
                                </div>
                                <div class="price">
                                    <font>￥<span>198.00</span></font> &nbsp; 26R
                                </div>
                                <div class="name"><a href="#">香奈儿邂逅清新淡香水50ml</a></div>
                                <div class="carbg">
                                    <a href="#" class="ss">收藏</a>
                                    <a href="#" class="j_car">加入购物车</a>
                                </div>
                            </li>
                            <li>
                                <div class="img"><a href="#"><img th:src="@{/images/per_7.jpg}" width="210"
                                                                  height="185"/></a>
                                </div>
                                <div class="price">
                                    <font>￥<span>198.00</span></font> &nbsp; 26R
                                </div>
                                <div class="name"><a href="#">香奈儿邂逅清新淡香水50ml</a></div>
                                <div class="carbg">
                                    <a href="#" class="ss">收藏</a>
                                    <a href="#" class="j_car">加入购物车</a>
                                </div>
                            </li>
                            <li>
                                <div class="img"><a href="#"><img th:src="@{/images/per_8.jpg}" width="210"
                                                                  height="185"/></a>
                                </div>
                                <div class="price">
                                    <font>￥<span>198.00</span></font> &nbsp; 26R
                                </div>
                                <div class="name"><a href="#">香奈儿邂逅清新淡香水50ml</a></div>
                                <div class="carbg">
                                    <a href="#" class="ss">收藏</a>
                                    <a href="#" class="j_car">加入购物车</a>
                                </div>
                            </li>
                            <li>
                                <div class="img"><a href="#"><img th:src="@{/images/per_9.jpg}" width="210"
                                                                  height="185"/></a>
                                </div>
                                <div class="price">
                                    <font>￥<span>198.00</span></font> &nbsp; 26R
                                </div>
                                <div class="name"><a href="#">香奈儿邂逅清新淡香水50ml</a></div>
                                <div class="carbg">
                                    <a href="#" class="ss">收藏</a>
                                    <a href="#" class="j_car">加入购物车</a>
                                </div>
                            </li>
                            <li>
                                <div class="img"><a href="#"><img th:src="@{/images/per_10.jpg}" width="210"
                                                                  height="185"/></a>
                                </div>
                                <div class="price">
                                    <font>￥<span>198.00</span></font> &nbsp; 26R
                                </div>
                                <div class="name"><a href="#">香奈儿邂逅清新淡香水50ml</a></div>
                                <div class="carbg">
                                    <a href="#" class="ss">收藏</a>
                                    <a href="#" class="j_car">加入购物车</a>
                                </div>
                            </li>
                            <li>
                                <div class="img"><a href="#"><img th:src="@{/images/per_11.jpg}" width="210"
                                                                  height="185"/></a>
                                </div>
                                <div class="price">
                                    <font>￥<span>198.00</span></font> &nbsp; 26R
                                </div>
                                <div class="name"><a href="#">香奈儿邂逅清新淡香水50ml</a></div>
                                <div class="carbg">
                                    <a href="#" class="ss">收藏</a>
                                    <a href="#" class="j_car">加入购物车</a>
                                </div>
                            </li>
                            <li>
                                <div class="img"><a href="#"><img th:src="@{/images/per_12.jpg}" width="210"
                                                                  height="185"/></a>
                                </div>
                                <div class="price">
                                    <font>￥<span>198.00</span></font> &nbsp; 26R
                                </div>
                                <div class="name"><a href="#">香奈儿邂逅清新淡香水50ml</a></div>
                                <div class="carbg">
                                    <a href="#" class="ss">收藏</a>
                                    <a href="#" class="j_car">加入购物车</a>
                                </div>
                            </li>-->
                        </ul>

                        <div class="pages" id="fyInfo">
                            <a th:href="@{javascript:void(0)}" class="p_pre" onclick="goPage(1)">首页</a>
                            <a href="javascript:void(0);" class="p_pre" onclick="goPage(pn-1)">上一页</a>
                            <span id="fyNum">
                                <!--<a href="#" class="cur">1</a>-->
                                <!--<a href="#">2</a>-->
                                <!--<a href="#">3</a>-->
                                <!--...-->
                                <!--<a href="#">20</a>-->
                            </span>
                            <a href="javascript:void(0);" class="p_pre" onclick="goPage(pn+1)">下一页</a>
                            <a href="javascript:void(0);" class="p_pre" onclick="goPage(lp)">末页</a>
                            <label>
                                <input id="pageNum" type="text" name="pageNum"
                                       style="width: 30px;height: 36px;margin-bottom: 25px;">
                            </label><a href="javascript:void(0);" onclick="goPageByNum()">GO</a>
                            <label>
                                <select onchange="selectChange(this)">
                                    <option>2</option>
                                    <option>4</option>
                                    <option>6</option>
                                    <option>8</option>
                                </select>
                            </label>
                            <span id="pageInfo"></span>
                        </div>
                    </div>
                </div>
            </div>

            <!--Begin Footer Begin -->
            <div class="b_btm_bg bg_color">
                <div class="b_btm">
                    <table border="0" style="width:210px; height:62px; float:left; margin-left:75px; margin-top:30px;"
                           cellspacing="0" cellpadding="0">
                        <tr>
                            <td width="72"><img th:src="@{/images/b1.png}" width="62" height="62"/></td>
                            <td><h2>正品保障</h2>正品行货 放心购买</td>
                        </tr>
                    </table>
                    <table border="0" style="width:210px; height:62px; float:left; margin-left:75px; margin-top:30px;"
                           cellspacing="0" cellpadding="0">
                        <tr>
                            <td width="72"><img th:src="@{/images/b2.png}" width="62" height="62"/></td>
                            <td><h2>满38包邮</h2>满38包邮 免运费</td>
                        </tr>
                    </table>
                    <table border="0" style="width:210px; height:62px; float:left; margin-left:75px; margin-top:30px;"
                           cellspacing="0" cellpadding="0">
                        <tr>
                            <td width="72"><img th:src="@{/images/b3.png}" width="62" height="62"/></td>
                            <td><h2>天天低价</h2>天天低价 畅选无忧</td>
                        </tr>
                    </table>
                    <table border="0" style="width:210px; height:62px; float:left; margin-left:75px; margin-top:30px;"
                           cellspacing="0" cellpadding="0">
                        <tr>
                            <td width="72"><img th:src="@{/images/b4.png}" width="62" height="62"/></td>
                            <td><h2>准时送达</h2>收货时间由你做主</td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="b_nav">
                <dl>
                    <dt><a href="#">新手上路</a></dt>
                    <dd><a href="#">售后流程</a></dd>
                    <dd><a href="#">购物流程</a></dd>
                    <dd><a href="#">订购方式</a></dd>
                    <dd><a href="#">隐私声明</a></dd>
                    <dd><a href="#">推荐分享说明</a></dd>
                </dl>
                <dl>
                    <dt><a href="#">配送与支付</a></dt>
                    <dd><a href="#">货到付款区域</a></dd>
                    <dd><a href="#">配送支付查询</a></dd>
                    <dd><a href="#">支付方式说明</a></dd>
                </dl>
                <dl>
                    <dt><a href="#">会员中心</a></dt>
                    <dd><a href="#">资金管理</a></dd>
                    <dd><a href="#">我的收藏</a></dd>
                    <dd><a href="#">我的订单</a></dd>
                </dl>
                <dl>
                    <dt><a href="#">服务保证</a></dt>
                    <dd><a href="#">退换货原则</a></dd>
                    <dd><a href="#">售后服务保证</a></dd>
                    <dd><a href="#">产品质量保证</a></dd>
                </dl>
                <dl>
                    <dt><a href="#">联系我们</a></dt>
                    <dd><a href="#">网站故障报告</a></dd>
                    <dd><a href="#">购物咨询</a></dd>
                    <dd><a href="#">投诉与建议</a></dd>
                </dl>
                <div class="b_tel_bg">
                    <a href="#" class="b_sh1">新浪微博</a>
                    <a href="#" class="b_sh2">腾讯微博</a>
                    <p>
                        服务热线：<br/>
                        <span>400-123-4567</span>
                    </p>
                </div>
                <div class="b_er">
                    <div class="b_er_c"><img th:src="@{/images/er.gif}" width="118" height="118"/></div>
                    <img th:src="@{/images/ss.png}"/>
                </div>
            </div>
            <div class="btmbg">
                <div class="btm">
                    备案/许可证编号：蜀ICP备12009302号-1-www.dingguagua.com Copyright © 2015-2018 尤洪商城网 All Rights Reserved. 复制必究 ,
                    Technical Support: Dgg Group <br/>
                    <img th:src="@{/images/b_1.gif}" width="98" height="33"/><img th:src="@{/images/b_2.gif}" width="98"
                                                                                  height="33"/><img
                        th:src="@{/images/b_3.gif}" width="98" height="33"/><img th:src="@{/images/b_4.gif}" width="98"
                                                                                 height="33"/><img
                        th:src="@{/images/b_5.gif}"
                        width="98" height="33"/><img
                        th:src="@{/images/b_6.gif}" width="98" height="33"/>
                </div>
            </div>
            <!--End Footer End -->
        </div>

    </body>


    <!--[if IE 6]>
    <script src="//letskillie6.googlecode.com/svn/trunk/2/zh_CN.js"></script>
    <![endif]-->
</html>
